<template>
  <div class="balance">
    <!-- 标题栏 -->
    <mt-header fixed title="账户流水">
      <mt-button icon="back" slot="left" v-on:click="goBack"></mt-button>
    </mt-header>

    <!-- 用来给标题栏占位 -->
    <div style="height: 2.75rem;width: 100%;"></div>

    <!-- 汇总数据容器 -->
    <div class="summaryLayout">
      <div class="summaryContextLayout">
        <p>￥{{ monthNumber }}</p>
        <p>本月应发</p>
      </div>
      <div
        style="width: 0.125rem; height: 2.8125rem; background-color: #F1F1F1;"
      ></div>
      <div class="summaryContextLayout">
        <p>￥{{ allNumber }}</p>
        <p>所有余额</p>
      </div>
    </div>

    <!-- 数据列表 -->
    <div class="dataListLayout">
      <p>{{ info.month }}月</p>
      <div class="dataItemLayout" v-for="item in list" :key="item.id">
        <div
          style="width: 20.3125rem; height: 1px; background-color: #F0F0F0;"
        ></div>
        <div class="dataItem">
          <div class="dataItemLeftLayout">
            <div class="dataItemIcon">{{ item.type }}</div>
            <div class="dataItemTitleLayout">
              <p class="dataItemTitle">{{ item.title }}</p>
              <p class="dataItemTime">{{ item.create_time }}</p>
            </div>
          </div>
          <div class="dataItemContextLayout">
            <p class="dataItemTitle">{{ item.money }}</p>
            <p class="dataItemTime">{{ item.classify }}</p>
          </div>
        </div>
      </div>
    </div>

    <div style="height: 3.5625rem;"></div>
  </div>
</template>

<script>
import { Indicator } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      monthNumber: "0.00",
      allNumber: "0.00",
      list: [],
      info: []
    };
  },
  created() {
    this.selectMoneyList();
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    selectMoneyList() {
      //个人中心--账户流水
      Indicator.open({ spinnerType: "fading-circle" });
      let me = this;
      this.$axios
        .post(
          "/api/home/moneyWater",
          {
            uid: localStorage.uid
          },
          {
            emulateJSON: true
          }
        )
        .then(kun => {
          console.log(kun);
          Indicator.close();
          if (kun.code == 200) {
            me.list = kun.data;
            me.info = kun.msg;
            me.monthNumber = kun.msg.money;
            me.allNumber = kun.msg.balance;
          } else {
            Toast(kun.msg);
          }
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
};
</script>

<style lang="scss" scoped>
p {
  margin: 0;
}

// 标题栏
.mint-header {
  height: 2.75rem;
  line-height: 1.25;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ff7f5f+25,e5274d+75 */
  background: rgb(255, 127, 95);
  /* Old browsers */
  background: -moz-linear-gradient(
    -45deg,
    rgb(255, 127, 95) 25%,
    rgb(229, 39, 77) 75%
  );
  /* FF3.6-15 */
  background: -webkit-linear-gradient(
    -45deg,
    rgb(255, 127, 95) 25%,
    rgb(229, 39, 77) 75%
  );
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    135deg,
    rgb(255, 127, 95) 25%,
    rgb(229, 39, 77) 75%
  );
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff7f5f', endColorstr='#e5274d', GradientType=1);
  /* IE6-9 fallback on horizontal gradient */
}

// 汇总数据容器
.summaryLayout {
  width: 21.5625rem;
  height: 4.5rem;
  margin: 0 auto;
  margin-top: 0.9375rem;
  box-shadow: 0rem 0rem 0.625rem rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;

  // 汇总子数据容器
  .summaryContextLayout {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    :first-child {
      color: #333333;
      font-size: 1.5rem;
    }

    :last-child {
      color: #333333;
      font-size: 0.9375rem;
    }
  }
}

// 流水列表容器
.dataListLayout {
  width: 20.3125rem;
  background-color: #ffffff;
  box-shadow: 0rem 0rem 0.625rem rgba(0, 0, 0, 0.05);
  margin: 0 auto;
  margin-top: 0.9375rem;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  padding-bottom: 0.625rem;

  // List列表
  .dataItemLayout {
    margin-top: 0.625rem;

    // 流水单条条目
    .dataItem {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 0.625rem;

      // 流水条目左边内容
      .dataItemLeftLayout {
        display: flex;
        align-items: center;

        // 流水条目Icon
        .dataItemIcon {
          width: 1.875rem;
          height: 1.875rem;
          background-color: #ff0000;
          border-radius: 50%;
          color: #ffffff;
          font-size: 0.75rem;
          text-align: center;
          line-height: 1.875rem;
        }

        // 流水条目标题和时间
        .dataItemTitleLayout {
          margin-left: 0.9375rem;

          :first-child {
            color: #333333;
            font-size: 0.8125rem;
          }

          :last-child {
            color: #c4c4c4;
            font-size: 0.625rem;
          }
        }
      }

      // 具体数字
      .dataItemContextLayout {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;

        :first-child {
          width: 100%;
          text-align: end;
          font-size: 0.8125rem;
          color: #ff0000;
        }

        :last-child {
          font-size: 0.625rem;
          color: #c4c4c4;
        }
      }
    }
  }
}
</style>
